<script setup>
import Viewer from '@src/Map/map';
import Request from '../request';
import { myToken } from '@src/config/sysConfig';
import { onMounted } from 'vue';
import Axios from 'axios';
import InterPic from './interPic.js';
import Windy from './windy-canvas';
import ColorPicker from './ColorPicker.vue';
import { ref, reactive, toRefs, toRaw } from 'vue';

const productArr = [
  {
    name: '温度webgl',
    data: './data/interPic/airTemp_2022082520_0_950_GRID.json',
    color: './data/interPic/airTemp_2022082520_0_950.json',
    isWindy: false,
  },
  {
    name: '温度canvas',
    data: './data/interPic/airTemp_2022082520_0_950_GRID.json',
    color: './data/interPic/airTemp_2022082520_0_950.json',
    isWindy: false,
  },
  {
    name: '风速',
    data: './data/interPic/windy_2022082520_0_950_GRID.json',
    color: './data/interPic/windy_2022082520_0_950.json',
    isWindy: true,
  },
];

let interPic, osmall, windy;
const colorConfig = reactive({
  color: [0, 0, 0],
  valueAry: [],
  rgbAry: [],
  clickIndex: 0,
});

onMounted(() => {
  osmall = document.getElementById('colorInfo');

  Request.getJson('./config/mapCfg.json', (r) => {
    const viewer = new Viewer(
      'mapContainer',
      [118.5627, 24.32128, 3e6, 0, -90, 0],
      false,
      r,
      myToken,
      0
    );
    interPic = new InterPic(viewer);

    //风场
    windy = new Windy(viewer);
    // Request.getJson('./data/interPic/windy_2022082520_0_950_GRID.json', (r) => {
    //   //风场加载代码
    //   windy.loadDataInfo(r, 0.6, 1000); //第一个参数为接口返回的json文件数据； 第二个参数为速度，可适当调整；第三个参数为高度，近地面为1000
    //   if (windy.isLoadData) {
    //     windy.doRender();
    //   }
    // });

    updataPic(productArr[0]);
  });
});

function updataPic(picInfo) {
  Axios.all([
    Axios.get(picInfo.data).then((r) => r.data),
    Axios.get(picInfo.color).then((r) => r.data),
  ]).then(
    Axios.spread((r1, r2) => {
      const isWindy = picInfo.isWindy;

      const dataInfo = r1;
      const colorInfo = r2;
      //存储配色信息
      if (colorInfo.Values[0] > colorInfo.Values[1]) {
        colorInfo.Values.reverse();
        colorInfo.Colors.reverse();
      }
      colorConfig.valueAry = colorInfo.Values;
      colorConfig.rgbAry = colorInfo.Colors;
      initColor();
      // 开始绘制
      interPic.loadDataInfo({
        dataInfo,
        colorInfo,
        isWindy,
      });
      if (interPic.isLoadData) {
        if (isWindy) {
          interPic.addInterPic_canvas();
        } else {
          if (picInfo.name.includes('webgl')) {
            interPic.addInterPic_webgl(); // 插值图
          } else {
            interPic.addInterPic_canvas();
          }
        }
      }

      if (isWindy) {
        windy.loadDataInfo(r1, 0.6, 1000); //第一个参数为接口返回的json文件数据； 第二个参数为速度，可适当调整；第三个参数为高度，近地面为1000
        if (windy.isLoadData) {
          windy.doRender();
        }
      } else {
        windy && windy.destroy();
      }
    })
  );
}

// 重置调色板
function initColor() {
  colorConfig.clickIndex = 0;
  colorConfig.color = colorConfig.rgbAry[0];
}

// 获取当前调色板色值
function exportColor(color) {
  const index = colorConfig.clickIndex;
  colorConfig.rgbAry[index] = color;
}

// 当前点击
function clickRadio(i) {
  colorConfig.clickIndex = i;
  colorConfig.color = colorConfig.rgbAry[i];
}

// 更新配色
function updataPicColor() {
  interPic.updataPicColor(toRaw(colorConfig.rgbAry));
}

function small_down(event) {
  const xMax = window.innerWidth - osmall.clientWidth;
  const yMax = window.innerHeight - osmall.clientHeight;
  let e = event || window.event;

  /*用于保存小的div拖拽前的坐标*/
  osmall.startX = e.clientX - osmall.offsetLeft;
  osmall.startY = e.clientY - osmall.offsetTop;
  /*鼠标的移动事件*/
  document.onmousemove = function (event) {
    let e = event || window.event;
    osmall.style.left = e.clientX - osmall.startX + 'px';
    osmall.style.top = e.clientY - osmall.startY + 'px';

    /*对于大的DIV四个边界的判断*/
    if (e.clientX - osmall.startX <= 0) {
      osmall.style.left = 0 + 'px';
    }
    if (e.clientY - osmall.startY <= 0) {
      osmall.style.top = 0 + 'px';
    }
    if (e.clientX - osmall.startX >= xMax) {
      osmall.style.left = xMax + 'px';
    }
    if (e.clientY - osmall.startY >= yMax) {
      osmall.style.top = yMax + 'px';
    }
  };

  /*鼠标的抬起事件,终止拖动*/
  document.onmouseup = function () {
    document.onmousemove = null;
    document.onmouseup = null;
  };
}
</script>


<template>
  <div id="interPic">
    <div id="mapContainer" />
    <canvas id="windy"
            class="windy"></canvas>

    <div class='buttonBox'>
      <el-button v-for="(v,i) in productArr"
                 round
                 :key="i"
                 @click="updataPic(v)">{{v.name}}</el-button>
    </div>
    <div id='colorInfo'>
      <div class='colorTitle'
           @mousedown="small_down">调色板</div>
      <div class='colorMain'>
        <el-scrollbar class="colorArr">
          <el-radio-group v-model="colorConfig.clickIndex"
                          class="radioGroup">
            <div class="colorRow"
                 v-for="(v,i) in colorConfig.valueAry"
                 :key="i">
              <el-radio :label="i"
                        :autofocus="false"
                        @click="()=>clickRadio(i)">
                <div class='legend'
                     :style="{ backgroundColor: `rgb(${colorConfig.rgbAry[i].join(',')})` }" /> {{v}}~{{colorConfig.valueAry[i+1]}}
              </el-radio>
            </div>
          </el-radio-group>
        </el-scrollbar>
        <ColorPicker @exportColor="exportColor"
                     :color="colorConfig.color" />
        <div class='updataBox'>
          <button @click="updataPicColor">应用</button>
        </div>
      </div>
    </div>
  </div>

</template>


<style lang="scss">
#interPic {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  #mapContainer {
    width: 100%;
    height: 100%;
    .cesium-widget canvas {
      width: 100%;
      height: 100%;
      position: absolute;
    }
  }

  .windy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; //穿透，避免影响地图的点击事件
  }

  .buttonBox {
    z-index: 2;
    position: absolute;
    top: 0;
    display: flex;
    column-gap: 10rem;
    margin: 10rem;
  }

  #colorInfo {
    background: rgba(9, 18, 64, 0.8);
    z-index: 2;
    position: absolute;
    top: 50rem;
    left: 10rem;
    width: 500px;
    height: 480px;

    .colorTitle {
      color: #fff;
      font-size: 25px;
      text-align: center;
      font-weight: bolder;
      cursor: move;
    }

    .colorMain {
      padding: 20rem;
      display: flex;
    }

    .colorArr {
      color: #fff;
      height: 400px;
      padding: 0 10px;
      .radioGroup {
        display: flex;
        flex-direction: column;
        .el-radio__label {
          display: flex;
          height: 30px;
          width: 100px;
          align-items: center;
          column-gap: 5px;
          color: #fff;
          .legend {
            width: 10px;
            height: 10px;
          }
        }
      }
    }

    .updataBox {
      position: absolute;
      display: flex;
      column-gap: 10px;
      bottom: 20px;
      right: 20px;
    }
  }
}
</style>